@import "src/common/styles/base";


.at-float-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 810;
  transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);

  /* elements */
  &__overlay {
    @include overlay;

    opacity: 0;
    transition: opacity 150ms ease-in;
  }

  &__container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11.52rem;
    border-radius: .256rem;
    background-color: #fff;
    overflow: hidden;
  }

  /* modifiers */
  &--active {
    visibility: visible;

    .at-float-modal__overlay {
      opacity: 1;
    }

    .at-float-modal__container {}
  }
}
